<template>
	<view class="page-container">
		<view class="current-after-sales-status">
			{{afterSalesProgress == 0 ? '售后申请中' : afterSalesProgress == 1 ? '售后审核中' : '已退款'}}
		</view>
		<!-- 进度条 -->
		<view class="progress-bar">
			<wd-steps :active="afterSalesProgress" align-center>
				<wd-step title="提交申请" icon="check-outline" />
				<wd-step title="审核" icon="check-outline" />
				<wd-step title="退款到账" description="金额原路返回" icon="check-outline" />
			</wd-steps>
		</view>

		<!-- 退款说明 -->
		<view class="refund-desc">
			<view class="title">
				<image class="title-img" src="/static/imgs/refund-desc-title.png">
				</image>
			</view>
			<view class="content">
				优惠券商品为虚拟产品，已使用的券不支持退款、换货。如用户发起订单售后，系统将根据实际已使用的券数自动核算退款金额。如优惠券在有效期内无法正常使用，可联系客服寻求解决方案。
			</view>
		</view>

		<!-- 退款信息 -->
		<view class="refund-info">
			<view class="title">
				<image class="title-img" src="/static/imgs/refund-info-title.png">
				</image>
			</view>
			<view class="form-item" style="display: flex;justify-content: space-between;">
				<text>订单编号</text>
				<text>{{orderInfo.title}}</text>
			</view>
			<view class="form-item" v-if="afterSalesProgress == 0">
				<text>退款理由</text>
				<textarea placeholder="请输入退款理由" v-model="refundReason" />
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom-buttons">
			<button class="btn-cancel" :disabled="submitStatus"
				@click="handleSubmit">{{afterSalesProgress == 0 ? '申请退款' : afterSalesProgress == 1 ? '审核中' : '已退款'}}</button>
			<!-- <button class="btn-contact" @click="handleCallTel" type="primary"
				style="background: linear-gradient(#6bb0f8, #427eee);">联系客服</button> -->
		</view>
		<wd-toast />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		apiOrderDetails,
		apiOrderAfterSales,
		apiGetOrderAfterSales
	} from "@/api/order";
	import {
		useToast
	} from "@/uni_modules/wot-design-uni";
	const toast = useToast();
	//页面加载
	onLoad((options) => {
		if (options.order_id) {
			getOrderDetails(options.order_id);
		}
	});
	const orderInfo = ref({});
	const afterSalesOrderInfo = ref({});
	const refundReason = ref(''); //售后原因
	const submitStatus = ref(false);
	const afterSalesProgress = ref(0);
	//获取订单详情
	const getOrderDetails = async (orderId) => {
		orderInfo.value = await apiOrderDetails({
			orderId: orderId
		});
		await getOrderAfterSales(orderId);
	}
	//获取售后订单详情
	const getOrderAfterSales = async (orderId) => {
		afterSalesOrderInfo.value = await apiGetOrderAfterSales({
			orderId: orderId
		});
		if (afterSalesOrderInfo.value) {
			afterSalesProgress.value = 1;
			submitStatus.value = true;
			if (afterSalesOrderInfo.value.status == 1) {
				afterSalesProgress.value = 2;
				submitStatus.value = true;
			}
		}
	}


	//客服电话
	const handleCallTel = () => {
		uni.makePhoneCall({
			phoneNumber: "4008381086",
			success: (res) => {},
			fail: (res) => {},
			complete: (res) => {},
		});
	}
	//申请退款
	const handleSubmit = async () => {
		if (refundReason.value == '') {
			toast.warning("请输入退款原因");
			return;
		}

		const res = await apiOrderAfterSales({
			orderId: orderInfo.value.id,
			refundReason: refundReason.value,
		});
		afterSalesProgress.value = 1;
		submitStatus.value = false;
		toast.success("已为您申请退款，等待客服审核");
	}
</script>

<style lang="scss" scoped>
	.page-container {
		padding-top: 150rpx;
		background: #f8f8f8 url(/static/imgs/index-top-bg.png) no-repeat;
		background-size: contain;
		height: calc(100vh - 150rpx);
	}

	.current-after-sales-status {
		color: #fff;
		text-align: center;
		font-size: 36rpx;
	}

	.progress-bar {
		margin: 40rpx;
		background: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
	}

	.refund-desc,
	.refund-info {
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.title {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			font-size: 1.2em;

			&-img {
				width: 120px;
				height: 30px;
			}

			.icon {
				width: 40rpx;
				height: 40rpx;
				background: #e3f2fd;
				border-radius: 8rpx;
				text-align: center;
				line-height: 40rpx;
				margin-right: 10rpx;
				color: #2196f3;
			}
		}
	}

	.form-item {
		margin-bottom: 20rpx;

		textarea {
			width: 94%;
			height: 200rpx;
			background: #f5f5f5;
			border-radius: 8rpx;
			padding: 20rpx;
			margin-top: 10rpx;
		}
	}

	.bottom-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 20rpx;
		background: #fff;

		button {
			flex: 1;
			margin: 0 10rpx;

			&.btn-cancel {
				background: #f5f5f5;
				color: #333;
			}
		}
	}
</style>